/**
 * Suspence 组件
 *
 *    Vue3 新增的，目前仍然是一个实验性质的组件
 * 
 *    作用：统一处理异步组件的加载效果
 * 
 *    
 *    <Suspense>
        <!-- 具有深层异步依赖的组件 -->
        <Dashboard />

        <!-- 在 #fallback 插槽中显示 “正在加载中” -->
        <template #fallback>
          Loading...
        </template>
      </Suspense>


      在初始渲染时，<Suspense> 将在内存中渲染其默认的插槽内容。
      如果在这个过程中遇到任何异步依赖，则会进入挂起状态。
      在挂起状态期间，展示的是后备内容。
      当所有遇到的异步依赖都完成后，
      <Suspense> 会进入完成状态，并将展示出默认插槽的内容。

      如果在初次渲染时没有遇到异步依赖，<Suspense> 会直接进入完成状态。
      组件树中新的更深层次的异步依赖不会造成 <Suspense> 回退到挂起状态。

      进入完成状态后，只有当默认插槽的根节点被替换时，<Suspense> 才会回到挂起状态。
      
      
 *
 * 异步组件
 *
 *    直接 import xxx from 'xx组件' 这种代码都是静态导入一个组件，这种方式会将所有静态导入的组件
 *    都在构建生产时生成到主JS文件中。会导致首屏加载的JS资源过大，网页渲染出内容的时间就会越长，白屏时间也会越长。
 *
 *
 *    要做一个优化的话，主要就是减少主JS的大小
 *          将一些组件做成异步组件，就能在构建时针对该组件单独生成JS
 *
 *    如何定义一个异步组件：
 *
 *      defineAsyncComponent(() => {
 *
 *          return new Promise((resolve) => {
 *              resolve(组件)
 *          })
 *
 *      })
 *
 *      defineAsyncComponent(() => import('xx组件'))
 *
 *      defineAsyncComponent({
 *        loader: () => import('xx组件'),
 *      })
 *
 *
 */

import { createApp } from "vue";
import App from "./App.vue";

// 创建应用
const app = createApp(App);

// 挂载应用
app.mount("#app");
